<script setup lang="ts">
import { ref } from 'vue'
import { BaseSelect } from '@pkgs/components'

const type1 = ref('')

async function fetchOptions() {
  return await new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        result: [
          {
            label: 'api-类型1',
            value: '1',
          },
          {
            label: 'api-类型2',
            value: '2',
          },
        ],
      })
    }, 1000)
  })
}

function onFormatOptions(options: any[]) {
  return options.map(item => ({
    label: `${item.label}--重新构造`,
    value: item.value,
  }))
}
</script>

<template>
  <ElForm label-position="top">
    <ElFormItem label="数据源通过options方式">
      <BaseSelect
        v-model="type1"
        :options="[
          { label: '类型1', value: '1' },
          { label: '类型2', value: '2' },
        ]"
      />
    </ElFormItem>

    <ElFormItem label="数据源通过api接口方式">
      <BaseSelect
        v-model="type1"
        :api="fetchOptions"
      />
    </ElFormItem>

    <ElFormItem label="api接口入参出参配置">
      <BaseSelect
        v-model="type1"
        :api="fetchOptions"
        :api-params="{ type: '1' }"
        api-result-label-field="label"
        api-result-value-field="value"
        api-result-data-field="result"
      />
    </ElFormItem>

    <ElFormItem label="支持重新构造api出参数据">
      <BaseSelect
        v-model="type1"
        :api="fetchOptions"
        api-result-data-field="result"
        :format="onFormatOptions"
      />
    </ElFormItem>
  </ElForm>
</template>
